// 导入 创建路由对象需要使用的函数
import { createRouter, createWebHashHistory } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '../store/auth'

// 导入组件
import Layout from '../components/Layout.vue'
import Login from '../views/login/login.vue'

/**
 * 基础路由（无需权限验证）
 * 这些路由在应用启动时就会被注册
 */
const constantRoutes = [
  {
    path: '/login',
    name: 'Login',
    component: Login,
    meta: {
      title: '用户登录',
      requiresAuth: false,
      hidden: true // 不在菜单中显示
    }
  },
  {
    path: '/',
    redirect: '/dashboard'
  },
  {
    path: '/404',
    name: '404',
    component: () => import('../views/404.vue'),
    meta: {
      title: '页面未找到',
      requiresAuth: false,
      hidden: true
    }
  }
]

/**
 * 布局路由
 * 用作动态路由的父路由
 */
const layoutRoute = {
  path: '/',
  name: 'Layout',
  component: Layout,
  redirect: '/dashboard',
  meta: {
    requiresAuth: true
  },
  children: [
    // 默认的仪表盘路由
    {
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('../views/Dashboard.vue'),
      meta: {
        title: '仪表盘',
        icon: 'Odometer',
        requiresAuth: true,
        permissions: ['dashboard:view']
      }
    },
    {
      path: 'profile',
      name: 'Profile',
      component: () => import('../views/Profile.vue'),
      meta: {
        title: '个人中心',
        icon: 'Avatar',
        requiresAuth: true,
        permissions: ['profile:view']
      }
    },
    {
      path: 'settings',
      name: 'Settings',
      component: () => import('../views/Settings.vue'),
      meta: {
        title: '系统设置',
        icon: 'Tools',
        requiresAuth: true,
        permissions: ['system:settings']
      }
    }
  ]
}

/**
 * 异步路由（需要权限验证）
 * 这些路由会根据用户权限动态添加
 */
export const asyncRoutes = [
  {
    path: '/system',
    name: 'System',
    component: Layout,
    redirect: '/system/user',
    meta: {
      title: '系统管理',
      icon: 'Setting',
      requiresAuth: true
    },
    children: [
      {
        path: 'user',
        name: 'SystemUser',
        component: () => import('../views/system/User.vue'),
        meta: {
          title: '用户管理',
          icon: 'User',
          requiresAuth: true,
          permissions: ['user:view']
        }
      },
      {
        path: 'role',
        name: 'SystemRole',
        component: () => import('../views/system/Role.vue'),
        meta: {
          title: '角色管理',
          icon: 'UserFilled',
          requiresAuth: true,
          permissions: ['role:view']
        }
      },
      {
        path: 'menu',
        name: 'SystemMenu',
        component: () => import('../views/system/Menu.vue'),
        meta: {
          title: '菜单管理',
          icon: 'Menu',
          requiresAuth: true,
          permissions: ['menu:view']
        }
      }
    ]
  },
  {
    path: '/content',
    name: 'Content',
    component: Layout,
    redirect: '/content/article',
    meta: {
      title: '内容管理',
      icon: 'Document',
      requiresAuth: true
    },
    children: [
      {
        path: 'article',
        name: 'ContentArticle',
        component: () => import('../views/content/Article.vue'),
        meta: {
          title: '文章管理',
          icon: 'EditPen',
          requiresAuth: true,
          permissions: ['content:view']
        }
      },
      {
        path: 'category',
        name: 'ContentCategory',
        component: () => import('../views/content/Category.vue'),
        meta: {
          title: '分类管理',
          icon: 'Collection',
          requiresAuth: true,
          permissions: ['content:view']
        }
      }
    ]
  }
]

// 创建路由实例
const router = createRouter({
  history: createWebHashHistory(),
  routes: [...constantRoutes, layoutRoute],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  }
})

// 路由守卫状态
let routerGuardEnabled = true

/**
 * 全局前置守卫
 * 处理路由权限验证和重定向
 */
router.beforeEach(async (to, from, next) => {
  // 如果路由守卫被禁用，直接通过
  if (!routerGuardEnabled) {
    next()
    return
  }
  
  // 开始加载进度条（如果有的话）
  // NProgress.start()
  
  const authStore = useAuthStore()
  const token = authStore.token || localStorage.getItem('token')
  
  // 设置页面标题
  if (to.meta?.title) {
    document.title = `${to.meta.title} - Vue3权限管理系统`
  }
  
  // 如果访问的是登录页
  if (to.path === '/login') {
    if (token && authStore.isAuthenticated) {
      // 已登录用户访问登录页，重定向到首页
      next({ path: '/' })
    } else {
      // 未登录用户正常访问登录页
      next()
    }
    return
  }
  
  // 检查是否需要认证
  if (to.meta?.requiresAuth !== false) {
    if (!token) {
      // 未登录，重定向到登录页
      ElMessage.warning('请先登录')
      next({
        path: '/login',
        query: { redirect: to.fullPath } // 保存目标路由，登录后跳转
      })
      return
    }
    
    // 验证token有效性
    if (!authStore.isAuthenticated) {
      try {
        const isValid = await authStore.validateToken()
        if (!isValid) {
          throw new Error('Token验证失败')
        }
      } catch (error) {
        console.error('Token验证失败:', error)
        ElMessage.error('登录已过期，请重新登录')
        authStore.logout()
        next({
          path: '/login',
          query: { redirect: to.fullPath }
        })
        return
      }
    }
    
    // 检查路由权限
    if (to.meta?.permissions && to.meta.permissions.length > 0) {
      const hasPermission = authStore.hasAnyPermission(to.meta.permissions)
      if (!hasPermission) {
        ElMessage.error('权限不足，无法访问该页面')
        next({ path: '/404' })
        return
      }
    }
    
    // 检查角色权限
    if (to.meta?.roles && to.meta.roles.length > 0) {
      const hasRole = to.meta.roles.includes(authStore.userRole)
      if (!hasRole) {
        ElMessage.error('角色权限不足，无法访问该页面')
        next({ path: '/404' })
        return
      }
    }
  }
  
  next()
})

/**
 * 全局后置守卫
 */
router.afterEach((to, from) => {
  // 结束加载进度条（如果有的话）
  // NProgress.done()
  
  // 记录路由访问日志
  console.log(`路由跳转: ${from.path} -> ${to.path}`)
})

/**
 * 路由错误处理
 */
router.onError((error) => {
  console.error('路由错误:', error)
  ElMessage.error('页面加载失败，请刷新重试')
})

/**
 * 动态添加路由
 * @param {Array} routes 路由配置
 */
export function addRoutes(routes) {
  routes.forEach(route => {
    router.addRoute(route)
  })
}

/**
 * 重置路由
 * 清除所有动态添加的路由
 */
export function resetRoutes() {
  // 获取当前所有路由
  const routes = router.getRoutes()
  
  // 移除动态添加的路由
  routes.forEach(route => {
    if (route.name && !constantRoutes.some(r => r.name === route.name) && route.name !== 'Layout') {
      router.removeRoute(route.name)
    }
  })
}

/**
 * 禁用路由守卫
 * 用于特殊情况下临时禁用权限验证
 */
export function disableRouterGuard() {
  routerGuardEnabled = false
}

/**
 * 启用路由守卫
 */
export function enableRouterGuard() {
  routerGuardEnabled = true
}

/**
 * 检查路由是否存在
 * @param {string} name 路由名称
 * @returns {boolean}
 */
export function hasRoute(name) {
  return router.hasRoute(name)
}

/**
 * 获取所有路由
 * @returns {Array} 路由列表
 */
export function getAllRoutes() {
  return router.getRoutes()
}

export default router